<template>
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
        <el-table-column
            v-for="item in columns"
            :prop="item.prop"
            :label="item.label"
            :key="item.prop"
            :width="item.width"
        >
            <template #default="scope" v-if="item.type">
                <span v-if="item.type === 'button'">
                    <el-button
                        v-for="btnItem in item.options"
                        size="small"
                        :type="btnItem.type"
                        :key="btnItem.btnName"
                        @click="clickBtn(btnItem.btnName, scope.row)"
                    >
                        {{ btnItem.btnName }}
                    </el-button>
                </span>
                <span v-if="item.type === 'img'">
                    <img
                        :src="scope.row[item.prop]"
                        :style="item.options.style ? item.options.style : 'height:50px;width:50px'"
                    />
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref } from 'vue';
defineProps(['columns', 'tableData', 'loading']);
const emit = defineEmits(['changebtn']);
function clickBtn(btnName: string, row: object) {
    let btnInfo = {
        btnName,
        row
    };
    emit('changebtn', btnInfo);
}
</script>

<style lang="scss" scoped>
body {
    margin: 0;
}
.example-showcase .el-loading-mask {
    z-index: 9;
}
</style>
